/******** FadeIn ********/

@keyframes FadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media screen and (min-width: 1080px) {
    .FadeIn {
        animation: FadeIn 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeIn {
        animation: FadeIn .3s forwards;
    }
}

/******** FadeOut ********/

@keyframes FadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@media screen and (min-width: 1080px) {
    .FadeOut {
        animation: FadeOut 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeOut {
        animation: FadeOut .3s forwards;
    }
}

/******** FadeInUp ********/

@keyframes FadeInUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media screen and (min-width: 1080px) {
    .FadeInUp {
        animation: FadeInUp 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeInUp {
        animation: FadeInUp .3s forwards;
    }
}

/******** FadeInLeft ********/

@keyframes FadeInLeft {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media screen and (min-width: 1080px) {
    .FadeInLeft {
        animation: FadeInLeft 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeInLeft {
        animation: FadeInLeft .3s forwards;
    }
}

/******** FadeInRight ********/

@keyframes FadeInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media screen and (min-width: 1080px) {
    .FadeInRight {
        animation: FadeInRight 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeInRight {
        animation: FadeInRight .3s forwards;
    }
}

/******** FadeInDown ********/

@keyframes FadeInDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media screen and (min-width: 1080px) {
    .FadeInDown {
        animation: FadeInDown 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeInDown {
        animation: FadeInDown .3s forwards;
    }
}

/******** FadeOutUp ********/

@keyframes FadeOutUp {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(50px);
        opacity: 0;
    }
}

@media screen and (min-width: 1080px) {
    .FadeOutUp {
        animation: FadeOutUp 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeOutUp {
        animation: FadeOutUp .3s forwards;
    }
}

/******** FadeInLeft ********/

@keyframes FadeOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100px);
        opacity: 0;
    }
}

@media screen and (min-width: 1080px) {
    .FadeOutLeft {
        animation: FadeOutLeft 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeOutLeft {
        animation: FadeOutLeft .3s forwards;
    }
}

/******** FadeOutRight ********/

@keyframes FadeOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100px);
        opacity: 0;
    }
}

@media screen and (min-width: 1080px) {
    .FadeOutRight {
        animation: FadeOutRight 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeOutRight {
        animation: FadeOutRight .3s forwards;
    }
}

/******** FadeOutDown ********/

@keyframes FadeOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-50px);
        opacity: 0;
    }
}

@media screen and (min-width: 1080px) {
    .FadeOutDown {
        animation: FadeOutDown 1s forwards;
    }
}

@media screen and (max-width: 1080px) {
    .FadeOutDown {
        animation: FadeOutDown .3s forwards;
    }
}